<template>
    <a-form-model
        :model="form"
        :rules="rules"
        class="account-from"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
        ref="form"
    >
        <!-- <a-form-model-item prop="imgUrl" label="头像">
            <a-avatar :src="accountFrom.imgUrl" :size="108" />
        </a-form-model-item> -->
        <a-form-model-item label="用户名">
            <a-input v-model="form.userName" disabled/>
        </a-form-model-item>
        <a-form-model-item label="所属部门">
            <a-input v-model="form.deptName" disabled />
        </a-form-model-item>
        <a-form-model-item label="所属角色">
            <a-input v-model="form.roleName" disabled />
        </a-form-model-item>
        <a-form-model-item label="手机号" prop="telephone">
            <a-input v-model="form.telephone" />
        </a-form-model-item>
        <a-form-model-item label="邮箱" prop="email">
            <a-input v-model="form.email" />
        </a-form-model-item>

        <a-form-item  style="margin-left:105px;">
            <a-button type="primary" @click="updateValue" :loading="loading">
                提交
            </a-button>
            <!-- <a-button style="margin-left:25px" @click="resetFrom">
                取消
            </a-button> -->
        </a-form-item>
    </a-form-model>
</template>

<script>
import { mapState } from 'vuex';
import { updateInfo } from '@/api/system/user';
import { setCache } from '@/utils/session';

export default {
    name: 'accountBase',
    data() {
        return {
            loading: false,
            form: {},
            rules: {
                telephone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: '请输入正确的手机号' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '请输入正确的邮箱' }
                ],
            }
        };
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo
        })
    },
    mounted() {
        this.form = {...this.accountInfo};
    },
    methods: {
        updateValue() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true;
                        await updateInfo(this.form);
                        setCache('userInfo',this.form)
                        this.$store.commit('user/SET_USERINFO',this.form)
                        this.$message.success('修改成功！');
                    } finally {
                        this.loading = false;
                    }
                }
            });
        },
        resetFrom() {
            this.$refs.accountFrom.resetFields();
        }
    }
};
</script>
<style lang="scss" scoped></style>
